<template>
    <div>
        <div class="head">
            <i class="el-icon-school"></i>
            <span slot="title">系管理</span>
        </div>
        <el-card class="box-card">
            <div class="nav">
                <el-button @click="add">
                    <i class="el-icon-plus"></i>
                    <span>创建</span>
                </el-button>
                <div class="box-search">
                    <el-input placeholder="系名" v-model="params.name"></el-input>
                    <el-button type="primary" @click="search">
                        <i class="el-icon-search"></i>
                        <span>搜索</span>
                    </el-button>
                </div>
            </div>
            <div class="pages">
                <el-pagination background layout="prev, pager, next" :total="totalPage * 10"
                    @current-change="handleCurrentChange" :current-page="currentPage">
                </el-pagination>
            </div>
            <div class="table">
                <el-table :data="tableData" style="width: 100%" stripe :header-cell-style="{ 'text-align': 'center' }"
                    :cell-style="{ 'padding': '7px', 'text-align': 'center' }" v-loading="loading">
                    <el-table-column prop="id" label="系id">
                    </el-table-column>
                    <el-table-column prop="name" label="系名">
                    </el-table-column>
                    <el-table-column prop="majorCount" label="专业数">
                    </el-table-column>
                    <el-table-column prop="teacherCount" label="教师数">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="success" @click="edit(scope.row.id)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <el-dialog title="编辑" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="30%">
            <edit :key="dialogFormVisible" @cancel="dialogFormVisible = false" @done="handleDone" :type="type" :id="id">
            </edit>
        </el-dialog>
    </div>
</template>

<script>
import {
    pageCount,
    page,
    mixinDelete,
} from '@/api/department.js'
import edit from './components/edit.vue'
import del from '@/mixin/del.js'
import dialog from '@/mixin/dialog.js'
import pages from '@/mixin/pages.js'
export default {
    mixins: [del, dialog, pages],
    components: { edit, },
    data() {
        return {
            params: {
                name: '',
            },
            mixinDelete,
            pageCount,
            page,
        }
    },
}
</script>

<style scoped lang="scss">
.head {
    margin-bottom: 5px;

    i {
        margin-right: 10px;
    }
}

.nav {
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;

    .box-search {
        width: 400px;
        margin-right: 100px;
        display: flex;
        justify-content: space-between;

        .el-input {
            width: 300px;
        }
    }
}

.pages {
    text-align: center;
}
</style>